<template>
  <div class="login-container">
    <h2>登录</h2>
    <van-form @submit="handleLogin">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit" :loading="loading" loading-text="登录中...">
          登录
        </van-button>
      </div>
    </van-form>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { login } from '@/api/user.js';
import { useAuthStore } from '@/stores/auth';

const router = useRouter();
const username = ref('');
const password = ref('');
const error = ref('');
const loading = ref(false);
const authStore = useAuthStore(); // 获取 authStore 实例

const handleLogin = async () => {
  try {
    loading.value = true; // 开始登录时设置 loading 为 true
    console.log('开始登录...');
    const success = await login(username.value, password.value);

    if (success) {
      console.log('登录成功，准备跳转...');
      console.log('当前 token:', authStore.token); // 检查 token 是否正确设置
      await nextTick(); // 确保所有状态更新完成后执行跳转
      router.push({ name: 'index' });
      showToast('登录成功');
    } else {
      console.error('登录失败，未获取到 token');
      error.value = '登录失败，请检查用户名和密码';
      showToast('登录失败，请检查用户名和密码');
    }
  } catch (err) {
    console.error('登录失败:', err.message);
    error.value = err.message;
    showToast('登录失败，请检查用户名和密码');
  }finally{
    loading.value = false; // 登录完成后设置 loading 为 false
  }
};
</script>

<style scoped>
.login-container {
  width: 100%; /* 设置为100%以去除左右边距 */
  padding-top: 2rem; /* 只保留上下内边距 */
  background-color: #fff;
  border-radius: 0.5rem;
  margin: auto;
  margin-top: 2rem;
}

.login-container h2 {
  margin-bottom: 1.5rem;
  font-size: 1rem; /* 减小标题字体大小 */
  text-align: center;
}

.van-cell__title span {
  font-size: 16px; /* 调整用户名和密码输入框的字体大小 */
}

.van-field__control::placeholder {
  font-size: 16px; /* 调整输入框占位符的字体大小 */
}

.van-field {
  margin-bottom: 1rem; /* 增加字段之间的间距 */
}

.van-button--primary {
  background-color: #007bff; /* 设置提交按钮的颜色 */
  border: none;
  font-size: 18px; /* 调整提交按钮的字体大小 */
}

.error-message {
  color: red;
  text-align: center;
  margin-top: 1rem;
}

</style>